<template>
  <el-dialog title="分配" :visible.sync="open" width="700px" :close-on-click-modal="false" append-to-body>
    <el-select v-model="assignee.userName" placeholder="请选择" style="width: 100%" filterable clearable>
      <el-option
        v-for="i in list"
        :key="i.userName"
        :label="i.nickName"
        :value="i.userName"
      >
        <span style="float: left">{{ i.nickName }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ i.userName }}</span>
      </el-option>
    </el-select>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">确 定</el-button>
      <el-button @click="cancel">取消分配</el-button>
      <el-button @click="open = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'assign',
  data() {
    return {
      open: false,
      assignee: {
        userName: undefined
      },
      list: [],
      uri: '/purchase/assignList'
    }
  },
  methods: {
    init(userName) {
      this.assignee = { userName }
      this.open = true
      this.getList()
    },
    getList() {
      this.$api.get(this.uri).then(({ data }) => {
        this.list = data
      })
    },
    submit() {
      let data = undefined
      if (this.assignee.userName) {
        this.list.forEach(i => {
          if (i.userName === this.assignee.userName) {
            this.assignee = i
            data = this.assignee
          }
        })
      }
      this.$emit('submit', data)
      this.open = false
    },
    cancel() {
      this.assignee.userName = undefined
      this.$emit('submit', undefined)
      this.open = false
    }
  }
}
</script>

<style scoped>

</style>
